<template>
  <div>
    <!-- 头部区域 -->
    <el-header>
      <p>万事达-TMS客户端</p>
      <div>
        <span class="iconfont icon-svg45-copy">⑧</span>
        <el-button type="info">退出系统</el-button>
      </div>
    </el-header>

    <!-- 标题区域 -->
    <el-row class="title">
      <el-col :span="24">
        <div>运输管理-运输计划</div>
      </el-col>
    </el-row>

    <!-- 搜索区域 -->
    <el-row :gutter="20" class="search">
      <!-- 类别筛选 -->
      <el-col :span="6">
        <div class="items_sel">
          <el-row :gutter="5">
            <!-- 下拉选择框 -->
            <el-col :span="10">
              <el-select v-model="value_items">
                <el-option v-for="item in options_items" :key="item.value_items" :label="item.label_items" :value="item.value_items">
                </el-option>
              </el-select>
            </el-col>

            <!-- 输入框 -->
            <el-col :span="14">
              <el-input v-model="input_items" clearable> </el-input>
            </el-col>
          </el-row>
        </div>
      </el-col>

      <!-- 日期筛选 -->
      <el-col :span="7">
        <div class="date_select">
          <el-row :gutter="5">
            <!-- 下拉选择框 -->
            <el-col :span="6">
              <el-select v-model="value_date">
                <el-option v-for="item in options_date" :key="item.value_date" :label="item.label_date" :value="item.value_date">
                </el-option>
              </el-select>
            </el-col>

            <!-- 日期选择框 -->
            <el-col :span="10">
              <el-date-picker v-model="date_sel" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
                style="width: 180%">
              </el-date-picker>
            </el-col>
          </el-row>
        </div>
      </el-col>

      <!-- 搜索按钮 -->
      <el-col :span="2">
        <el-button type="success">搜索</el-button>
      </el-col>
    </el-row>

    <!-- 拆分功能 -->
    <el-row :gutter="5" class="split_btn_group">
      <el-col :span="2">
        <el-button type="primary" @click="handleGoodsSplit">货物拆分</el-button>
      </el-col>
      <el-col :span="2">
        <el-button type="primary" @click="handleLineSplit">线路拆分</el-button>
      </el-col>
      <el-col :span="2">
        <el-button type="primary">撤销拆分</el-button>
      </el-col>
      <el-col :span="2">
        <el-button type="primary">查看</el-button>
      </el-col>
    </el-row>

    <!-- 表格区域 -->
    <el-table :data="table_Data" border :header-cell-style="{ background: '#d3dce6', color: '#333' }">
      <el-table-column prop="sel" label="选择" type="selection"></el-table-column>
      <el-table-column prop="order_num" label="订单号" align="center"></el-table-column>
      <el-table-column prop="order_time" label="下单时间" width="110px" align="center"></el-table-column>
      <el-table-column prop="contract_num" label="合同编号" align="center"></el-table-column>
      <el-table-column prop="waybill_num" label="运单号" align="center"></el-table-column>
      <el-table-column prop="plan_start_time" label="计划发车时间" width="110px" align="center"></el-table-column>
      <el-table-column prop="plan_end_time" label="计划到达时间" width="110px" align="center"></el-table-column>
      <el-table-column prop="origin" label="始发地" align="center"></el-table-column>
      <el-table-column prop="destination" label="目的地" align="center"></el-table-column>
      <el-table-column prop="consignee_firm" label="收货方" align="center"></el-table-column>
      <el-table-column prop="goods_name" label="货物名称" align="center"></el-table-column>
      <el-table-column prop="goods_weight" label="重量kg" align="center"></el-table-column>
    </el-table>

    <!-- 分页区域 -->
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pagenum" :page-sizes="[1, 5, 10, 20]"
      :page-size="pagesize" layout="total, sizes, prev, pager, next, jumper" :total="this.table_Data.length">
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      // 类别筛选
      options_items: [
        {
          value_items: "选项1",
          label_items: "始发地",
        },
        {
          value_items: "选项2",
          label_items: "收货人姓名",
        },
        {
          value_items: "选项3",
          label_items: "目的地",
        },
        {
          value_items: "选项4",
          label_items: "订单号",
        },
      ],
      // 类别输入框
      input_items:'',
      // 默认筛选类别
      value_items: "始发地",
      // 时间选项
      options_date: [
        {
          value_date: "选项1",
          label_date: "下单时间",
        },
        {
          value_date: "选项2",
          label_date: "收货有效期",
        },
      ],
      // 时间选择器
      date_sel:'',
      // 默认展示时间类型
      value_date: "下单时间",
      // 表格数据
      table_Data: [
        {
          sel: "", // 选择
          order_num: "XL00000001", // 订单号
          order_time: "2017/09/10 09:12:59", // 下单时间
          contract_num: "HCF2017066877", // 合同编号
          waybill_num: "XL00000011-a1", // 运单号
          plan_start_time: "2017/09/10 09:12:59", // 计划发车时间
          plan_end_time: "2017/09/10 09:12:59", // 计划到达时间
          origin: "青岛市", // 始发地
          destination: "天津市", // 目的地
          consignee_firm: "天津科技公司", // 收货方
          goods_name: "白糖精糖", // 货物名称
          goods_weight: "30", // 重量kg
        },
        {
          sel: "", // 选择
          order_num: "XL00000001", // 订单号
          order_time: "2017/09/10 09:12:59", // 下单时间
          waybill_num: "HCF2017066877", // 合同编号
          waybill_num: "XL00000011-a2", // 运单号
          plan_start_time: "2017/09/10 09:12:59", // 计划发车时间
          plan_end_time: "2017/09/10 09:12:59", // 计划到达时间
          origin: "青岛市", // 始发地
          destination: "天津市", // 目的地
          consignee_firm: "天津科技公司", // 收货方
          goods_name: "白糖精糖", // 货物名称
          goods_weight: "20", // 重量kg
        },
        {
          sel: "", // 选择
          order_num: "XL00000001", // 订单号
          order_time: "2017/09/10 09:12:59", // 下单时间
          waybill_num: "HCF2017066877", // 合同编号
          waybill_num: "XL00000011-a3", // 运单号
          plan_start_time: "2017/09/10 09:12:59", // 计划发车时间
          plan_end_time: "2017/09/10 09:12:59", // 计划到达时间
          origin: "广州市", // 始发地
          destination: "赣州市", // 目的地
          consignee_firm: "赣州科技公司", // 收货方
          goods_name: "木材", // 货物名称
          goods_weight: "20", // 重量kg
        },
        {
          sel: "", // 选择
          order_num: "XL00000001", // 订单号
          order_time: "2017/09/10 09:12:59", // 下单时间
          waybill_num: "HCF2017066877", // 合同编号
          waybill_num: "XL00000011-a4", // 运单号
          plan_start_time: "2017/09/10 09:12:59", // 计划发车时间
          plan_end_time: "2017/09/10 09:12:59", // 计划到达时间
          origin: "青岛市", // 始发地
          destination: "天津市", // 目的地
          consignee_firm: "天津农业", // 收货方
          goods_name: "白糖精糖", // 货物名称
          goods_weight: "20", // 重量kg
        },
        {
          sel: "", // 选择
          order_num: "XL00000001", // 订单号
          order_time: "2017/09/10 09:12:59", // 下单时间
          waybill_num: "HCF2017066877", // 合同编号
          waybill_num: "", // 运单号
          plan_start_time: "2017/09/10 09:12:59", // 计划发车时间
          plan_end_time: "2017/09/10 09:12:59", // 计划到达时间
          origin: "贵州", // 始发地
          destination: "深圳", // 目的地
          consignee_firm: "深圳腾讯", // 收货方
          goods_name: "醋", // 货物名称
          goods_weight: "60", // 重量kg
        },
      ],
      pagenum: 1, // 当前页码值
      pagesize: 20, // 默认每页显示几条数据
      total: 200, // 总数据条数
    };
  },

  methods: {
    // 监听 每页显示条数 改变的事件
    handleSizeChange(newSize) {
      console.log(`每页 ${newSize} 条`);
    },
    // 监听 页码值 改变的事件
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    // 点击跳转 货物拆分 页面
    handleGoodsSplit(){
      this.$router.push("/carrier/goodssplit")
    },
    // 点击跳转 线路拆分 页面
    handleLineSplit(){
      this.$router.push("/carrier/linesplit")
    }
  },
};
</script>
<style lang='less' scoped>
* {
  margin: 0;
  padding: 0;
  list-style: none;
}
.el-header {
  background-color: #99a9bf;
  color: #333;
  font-size: 24px;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;
  div {
    span {
      margin: 30px;
      font-size: 28px;
    }
  }
}

.title {
  height: 30px;
  background-color: #d3dce6;
  line-height: 30px;
  margin-bottom: 5px;
  div {
    text-align: left;
    margin-left: 5px;
  }
}

.search {
  margin-bottom: 5px;
  el-button {
    height: 10px;
  }
}

.split_btn_group {
  margin-left: 5px;
  margin-bottom: 5px;
}
</style>